<template>
  <div>
    <el-empty v-if="list.length == 0" description="暂无数据"></el-empty>
    <div v-if="list.length > 0">
      <el-row :gutter="10" v-loading="load">
        <el-col :span="4" class="user" v-for="item in list">
          <div @click="userClick(item)">
            <el-avatar shape="circle" :size="60" fit="fill" :src="item.avatar"></el-avatar>
            <p class="touText">{{item.name}}</p>
          </div>
        </el-col>
      </el-row>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.totalCount"
                       :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
      </div>
    </div>
    <!-- 查看详情 -->
    <el-dialog title="聊天信息" :visible.sync="chatFlg" width="40%" @close="charClose">
      <div :v-loading="charLoad">
        <p style="margin-bottom:10px;">{{name}} 与 {{charquery.name}} 的聊天记录</p>
        <el-row class="chatMain">
          <el-col v-for="(item,i) in charList" :class="item.mrFrom == charquery.e_userid ? 'left' : 'right'">
            <span class="time">{{item.msgtime}}</span>
            <div class="text">
              <span class="san"></span>
              <div v-if="item.msgtype == 'meeting_voice_call'" class="con">
                <!-- {{item.msgcontent}} -->
                <audio :src="item.msgcontent" controls class="audioDom"></audio>
              </div>
              <div v-if="item.msgtype == 'card'" class="con">
                【分享名片】 {{JSON.parse(item.msgcontent).corpname}}
                <!-- JSON.parse(item.msgcontent).userid -->
                <el-link type="primary" :underline="false">查看</el-link>
              </div>
              <div v-if="item.msgtype == 'location'" class="con">
                【发送定位】<i class="el-icon-location-outline"></i> {{JSON.parse(item.msgcontent).address}}
              </div>
              <div v-if="item.msgtype == 'voice'" class="con">
                <!-- {{item.msgcontent}} -->
                <audio :src="item.msgcontent" controls class="audioDom"></audio>
              </div>
              <div v-if="item.msgtype == 'text'" class="con">
                {{item.msgcontent}}
              </div>
              <div v-if="item.msgtype == 'file'" class="con">
                【文件】 {{JSON.parse(item.content).filename}} <el-link type="primary" :href="item.msgcontent" target="_blank" :underline="false">查看
                </el-link>
              </div>
              <div v-if="item.msgtype == 'emotion'" class="con">
                <el-image style="width: 100px;" :src="item.msgcontent">
                </el-image>
              </div>
              <div v-if="item.msgtype == 'image'" class="con">
                <el-image style="width: 100px;" :preview-src-list="[item.msgcontent]" :src="item.msgcontent">
                </el-image>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="pagination">
          <el-pagination background layout="total, prev, pager, next" :current-page="charquery.page" :page-size="charquery.limit"
                         :total="charquery.totalCount" :pager-count="5" @current-change="charPageChange" @prev-click="charPageChange"
                         @next-click="charPageChange"></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { sessionArchivingCustomerList, sessionArchivingCustomerChat } from '../../../../../api/index';

export default {
  data() {
    return {
      load: false,
      chatFlg: false,
      name: '',
      uId: '',
      query: {
        page: 1,
        limit: 10,
        kw: '',
        totalCount: 0,
        type: "",
        id: "",
      },
      list: [],
      charquery: {
        page: 1,
        limit: 10,
        totalCount: 0,
        userid: '',
        name: '',
        e_userid: '',
      },
      charLoad: false,
      charList: [],
      //amr播放源
      playRec: '',
    };
  },
  created() {

  },
  methods: {
    //获取列表
    getlist() {
      sessionArchivingCustomerList({
        page: this.query.page,
        limit: this.query.limit,
        userid: this.query.id,
        kw: this.query.kw,
        conditionType: this.query.type,
        uid: this.uId
      }).then((res) => {
        if (res.code == 0) {
          this.list = res.recordList;
          this.query.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //查看聊天记录
    userClick(item) {
      this.charLoad = true;
      this.chatFlg = true;
      this.charquery.name = item.name;
      this.charquery.e_userid = item.externalUserid;
      sessionArchivingCustomerChat({
        page: this.charquery.page,
        limit: this.charquery.limit,
        userid: this.charquery.userid,
        e_userid: item.externalUserid,
        uid: this.uId
      }).then(res => {
        this.charLoad = false;
        if (res.code == 0) {
          this.charList = res.recordList;
          this.charquery.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //关闭聊天
    charClose() {
      this.charList = [];
      this.charquery.page = 1;
    },
    //翻页
    PageChange(page) {
      this.query.page = page;
      this.getlist();
    },
    //聊天记录翻页
    charPageChange(page) {
      this.charquery.page = page;
      this.userClick({
        name: this.charquery.name,
        externalUserid: this.charquery.e_userid,
      });
    },
  },
  mounted() {
    this.$nextTick(function() {
      this.$on("getInit", function(obj) {
        this.query.id = obj.id;
        this.charquery.userid = obj.id;
        this.query.type = obj.type;
        this.name = obj.name;
        this.uId = obj.uId;

        this.getlist();
      })
    })
  },
}
</script>

<style scoped>
.user {
    text-align: center;
    margin: 10px 0;
}
.touText {
    font-size: 12px;
    color: #999;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chatMain {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
}
.left,
.right {
    margin: 8px 0;
}

.left .text,
.right .text {
    position: relative;
}
.left .con {
    max-width: 80%;
    background: #eee;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px 0;
    display: inline-block;
    width: auto;
}

.left .time {
    font-size: 12px;
    color: #999;
}
.left .san {
    left: -10px;
}
.san {
    border: 5px solid #eee;
    border-left-color: #fff;
    border-bottom-color: #fff;
    border-top-color: #fff;
    width: 0;
    height: 0;
    display: inline-block;
    position: absolute;
    top: 10px;
}
.right .con {
    max-width: 80%;
    float: right;
    background: greenyellow;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px 0;
    width: auto;
}
.con img {
    width: 100px;
    height: 100px;
}
.right .san {
    right: -10px;
    border-left-color: greenyellow;
    border-right-color: #fff;
}
.right .time {
    font-size: 12px;
    color: #999;
    display: block;
    text-align: right;
}
</style>
